<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/vue.js"></script>
    <style>
        li {
            line-height: 40px;
            text-indent: 16px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>
            <button @click="addEle">新增</button>
            <button @click="delEle">删除</button>
        </p>

        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}</li>
        </ul>

        <hr>

        <p>
            <button @click="changeName">changeName</button>
            <button @click="changeAge">changeAge</button>
            <button @click="reset">reset</button>
            <button @click="addProp">addProp</button>
            <button @click="changeSex">changeSex</button>
        </p>
        <ul>
            <li>{{zhang.name}}</li>
            <li>{{zhang.age}}</li>
            <li>{{zhang.height}}</li>
            <li>{{zhang.weight}}</li>
            <li>{{zhang.sex}}</li>
        </ul>

    </div>
</body>
<script>

    // 1. watch可以监听数组的变化  
    // 2. watch监听对象数据时默认是浅层的


    // Vue响应式 => 检测数据改变更新视图 -> 检测对象数据改变时,用的是深度拦截
    // watch监听 => 监听对象数据改变,执行对应的回调函数(默认是浅层的) -> 只关注监听的属性对应的属性值是否改变, 如果属性值是一个对象,该对象的子属性发生改变,不管


    var app = new Vue({
        el: "#app",
        data: {
            count: 2,
            list: [1, 4, 7, 2, 5, 8, 3, 6, 9],
            zhang: {
                name: "张三",
                age: 18,
                height: "173cm",
                weight: "70kg",
            },
        },
        methods: {
            addEle() {
                var num = Math.round(Math.random() * 20);
                console.log(num);
                var index = Math.floor(Math.random() * this.list.length);
                this.list.splice(index, 0, num);
            },
            delEle() {
                // var index = Math.floor(Math.random() * this.list.length);
                // this.list.splice(index, 1);

                // this.list.length--;

                this.list[1] = 40;

                console.log(this.list);

            },
            getEven: function () {
                console.log("getEven执行了");
                return this.list.filter(v => v % 2 == 0);
            },

            changeName() {
                this.zhang.name = '李四'
            },
            changeAge() {
                this.zhang.age++;
            },
            reset() {
                this.zhang = {
                    name: "张三",
                    age: 18,
                    height: "173cm",
                    weight: "70kg",
                }
            },
            changeSex() {
                this.zhang.sex = this.zhang.sex == "男" ? "女" : "男";
                // this.$forceUpdate();
            },
            addProp() {
                // this.zhang.sex = "男";
                // console.log(this.zhang);

                // 强制更新视图  => 一次性操作
                // this.$forceUpdate();


                // 2. 使用Vue提供的 新增/修改数据的方法(对象)    => 没有就新增,有就修改
                //    Vue.set(data,key,val)    构造函数Vue的静态方法
                //    this.$set(data,key,val) 

                Vue.set(this.zhang, "sex", "男");
                // console.log(this.zhang);


                // Vue.set(this.$data, "a", 1)

            }
        },
        watch: {
            // watch可以监听数组的改变   1. 变更方法 -> 官方做了处理,可以触发视图更新,也可以被watch检测  2. 替换数组 => 新数组覆盖旧数组 -> 也可以被watch检测到
            list: function (newVal, oldVal) {
                console.log("list发生改变", newVal, oldVal);
            },
            zhang: function (newVal, oldVal) {
                console.log("zhang发生改变", newVal, oldVal);

            }
        }

    })


</script>

</html>